<!--维护保养组件设置 -->
<template>
    <div class="Maintenance">
        <div class="Maintenance-left">
            <div class="maintenance" v-for="(v, i) in modelsArr" :class="[getModelId.assemblyId == v.assemblyId ? 'on' : '']" :key="v.assemblyId">
                <div class="title" @click="modelClick(v)"> {{ v.assemblyName }}</div>

                <img class="img" @click="delModeClick(v)" src="../../../assets/imgx/off.png" alt="">

            </div>

            <div class="addModel" @click="AddModelIsbool = true">
                <div>
                    添加模块
                </div>
                <img class="img" src="../../../assets/imgx/add_num.png" alt="">

            </div>
        </div>
        <div class="Maintenance-right">
            <div class="table">
                <slotCom>
                    <template v-slot:com>
                        <MyTalBleComponent @errorFun="errorFun" :tableListArr="tableListArr" @delRefresh="delRefresh" @child_TalBe_Fun="child_TalBe_Fun" />
                    </template>
                </slotCom>
                <pageChild :total="total" :pageSize="pageSize" :current="current" @currentChange="currentChange" />

            </div>

        </div>

        <div class="zezaoc">
            <div @click="addWorkpiece">添加</div>

            <el-upload accept=".xls,.xlsx" :show-file-list="false" class="apply-import-button" name="file" :http-request="httpReQuest" :before-upload="beforeAvatarUpload"
                action="/biz/mesConfig/importData">
                <el-button size="small" class="btn-custom-import">批量导入</el-button>
            </el-upload>
            <div @click="downloadModel">下载模板</div>
            <Btn_box />

        </div>
        <div class="addzzc" v-if="AddModelIsbool">
            <topIndex>
                <template v-slot:com>
                    <div class="MaskLayeR_top">
                        <div>
                            添加模块
                        </div>
                        <img src="../../../assets/imgx/message-bg.png" alt="">

                        <span class="off" @click="AddModelIsbool = false">×</span>
                        &nbsp;

                    </div>
                    <div class="MaskLayeR_button">
                        <div>
                            模块名称：<input @input="InputTitle = false" type="text" v-model="modelName"> <span v-show="InputTitle" style="
                            width: 90px;
                            display: block;
                            color: #FF5757FF;
                            margin-left: 80px;
                            ">{{ title }}</span>
                        </div>

                        <button class="btn" @click="addModelFun">添加</button>
                    </div>
                </template>
            </topIndex>

        </div>
        <div class="listzzc" v-if="AddIsBool">
            <topIndex>
                <template v-slot:com>
                    <div class="listzzc_2">
                        <div class="listzzc_3">
                            <div class="listzzc_top">
                                <div>{{ edit.workpieceId ? "编辑" : "添加" }}</div>
                                <img src="../../../assets/imgx/message-bg.png" alt="">

                                <span class="error" @click="AddIsBool = false">×</span>

                            </div>
                            <div class="listzzc_center">
                                <AddComponent @errorFun="errorFun" :editList="edit" @child_edit_fun="child_edit_fun" :getModelId="getModelId" />
                            </div>
                        </div>
                    </div>
                </template>
            </topIndex>

        </div>
        <div class="servebox">
            &nbsp;
            &nbsp;
            <input type="text" placeholder="零部件名称" v-model="serve">
            <div class="serveimg">
                <img src="../../../assets/imgx/seel.png" @click="serch_img_Click" alt="">
            </div>

        </div>

        <div class="lod" v-show="elIconWarningBool">
            <lodFile :doScTitle="doScTitle" />
        </div>
    </div>
</template>
<script>
import { mapActions, mapMutations } from "vuex"
import { addModuleApi, addModuleListApi, GetModuleApi, downLoadFilesApi, delModelApi } from "@/api/SettingsApi/index.js"
import Btn_box from "@/components/uponelevel/index.vue"

export default {
    components: {
        MyTalBleComponent: () => import("./tableChildcom/index.vue"),
        AddComponent: () => import("./addchildren/index.vue"),
        slotCom: () => import("@/components/SslotCom/index.vue"),
        topIndex: () => import("@/components/SslotCom/top_index.vue"),
        lodFile: () => import("@/components/outfilelod/index.vue"),
        pageChild: () => import("@/components/pagination/index.vue"),

        Btn_box

    },
    data() {
        return {
            doScTitle: "",
            elIconWarningBool: false,
            InputTitle: false,
            AddIsBool: false,
            AddModelIsbool: false,
            modelName: "",
            modelsArr: [],
            tableListArr: [],
            file: "",
            getModelId: {},
            show: "",
            total: 0,
            pageSize: 10,
            current: 1,
            edit: {},
            serve: "",
            title: "",
            time3: ""
        }
    },


    mounted() {
        this.DroASideFun()


    },
    methods: {
        ...mapActions("Tableindex", ["asyncgetTableListFunction"]),
        ...mapMutations("Tableindex", ["modelfun"]),
        delModeClick(item) {
            delModelApi({ assemblyId: item.assemblyId }).then(res => {

                if (res.code != 200) {
                    this.errorFun(res)


                }
            })
        },
        addWorkpiece() {
            if (!this.getModelId){
                //
                let dic ={
                    code: -1,msg:'请先中模块名'
                }
                this.errorFun(dic)
                return false;
            }
            
            this.AddIsBool = !this.AddIsBool;
            this.edit = {}
        },
        delRefresh() {
            const id = this.getModelId.assemblyId;
            this.getTableListFun(id)
        },
        errorFun(item) {

            this.doScTitle = item.msg;
            this.elIconWarningBool = true
            clearInterval(this.time3)
            this.time3 = setInterval(() => {
                this.elIconWarningBool = false
            }, 3000)

        },
        // 编辑
        child_edit_fun() {
            this.AddIsBool = false;
            this.getTableListFun(this.getModelId.assemblyId);

        },
        child_TalBe_Fun(item) {
            console.log(item);

            this.edit = item;
            this.AddIsBool = true;
        },
        // 页码
        currentChange(current) {
            this.current = current
            const id = this.getModelId.assemblyId;

            this.getTableListFun(id)
        },
        beforeAvatarUpload(file) {
            console.log(file.type);
            const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (!isJPG) {
                this.$message.error('只能是execl文件');
            }

            return isJPG;
        },
        // 上传
        httpReQuest(file) {
            let formData = new FormData()
            formData.append('file', file.file)
            downLoadFilesApi({
                file: formData,
                updateSupport: true
            }).then(res => {
                if (res.code == 200) {
                    this.DroASideFun();
                } else {
                    this.errorFun(res)

                }

            })
        },
        serch_img_Click() {
            this.getTableListFun(this.getModelId.assemblyId)
        },
        // 下载
        downloadModel() {
            window.location.href = window.location.origin + '/media/assets/templateWorkpiece.xlsx'

        },
        addModelFun() {
            if (this.modelName != "") {
                addModuleApi({
                    equipmentId: this.$store.state.UserIndex.equipment.equipmentId,
                    assemblyName: this.modelName,
                }).then(res => {
                    console.log(res);
                    this.DroASideFun()
                    this.modelName = ""
                })
                this.AddModelIsbool = false
            } else {
                this.InputTitle = true
                this.title = '模块名不能为空'
            }

        },

        modelClick(item) {
            this.getModelId = item;
            this.modelfun(item)
            this.getTableListFun(item.assemblyId);
        },
        DroASideFun() {
            GetModuleApi({
                equipmentId: this.$store.state.UserIndex.equipment.equipmentId
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.modelsArr = res.data;
                    this.getModelId = res.data[0]
                    console.log(this.getModelId);
                    if (this.getModelId) {
                        this.getTableListFun(this.getModelId.assemblyId);
                    }
                } else {
                    this.errorFun(res)

                }
            })
        },
        getTableListFun(id) {
            addModuleListApi({
                searchKey: this.serve,
                current: this.current,
                size: this.pageSize,
                assemblyId: id,
            }).then(res => {

                if (res.code == 200) {
                    // for (let index = 0; index <= 10; index++) {
                    //     if (res.data.list.length >= 10) {
                    this.tableListArr = res.data.list
                    this.total = Number(res.data.total);
                    this.pageSize = res.data.pageSize;
                    this.current = res.data.pageNum;
                    // } else {
                    //     res.data.list.push({"title":"1"})
                    // }

                    // }
                } else {
                    this.errorFun(res)
                }
            })
        },
    },
    beforeDestroy() {
        clearInterval(this.time3)
    }
}
</script>
<style lang="less" scoped>


.lod {
    position: fixed;
    top: 5%;
    left: 790px;
    z-index: 999;

}

.el-table /deep/ .el-table__row {
    height: 40px;
}

.el-table .el-table__cell {
    padding: 0px 0px;
}

.table {
    width: 99%;
    height: 778px;

}



.zezaoc /deep/ .el-upload-list {
    display: none !important;
}

.el-button--small {
    padding: 9px 13px;
    font-size: 16px;
    border-radius: 3px;
}

.servebox {
    width: 218px;
    height: 20px;
    position: absolute;
    left: 8%;
    top: -6%;
    display: flex;
    border: 1px solid #02489e;
    border-radius: 15.5px;
    z-index: 999;

    input {
        width: 95%;
        border: 0;
        outline: 0;
        background: none;
        color: #3e5f90;
        font-size: 14px;
    }

    input::-webkit-input-placeholder {
        margin-left: 14px;
        color: #3E5E90;
        margin-left: 50px;
    }

    .serveimg {
        width: 30px;
        height: 25px;
        position: relative;
        z-index: 1;

        img {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            left: 3px;
        }
    }

}


.listzzc {
    background: #091123;
    border: 1px solid #113D71;
    width: 452px;
    height: 851px;
    opacity: 0.95;
    position: absolute;
    right: 38%;



    .listzzc_2 {
        width: 100%;
        height: 100%;

        background: rgb(3 55 139 / 36%);

        .listzzc_3 {
            width: 100%;
            height: 100%;
            box-shadow: inset 0px 0px 54px 0px #0d3eb8b5;

            .listzzc_top {
                width: 100%;
                height: 29px;
                line-height: 30px;
                margin-left: 5px;
                display: flex;
                position: relative;

                div {
                    width: 20%;
                    height: 29px;
                    text-align: center;
                    color: white;
                }

                img {
                    width: 80%;
                    height: 100%;
                    position: absolute;
                    right: 0;
                }

                .error {
                    width: 18px;
                    height: 18px;
                    text-align: right;
                    font-size: 36px;
                    font-weight: bold;
                    color: #0E66B3;
                    z-index: 99;
                    cursor: pointer;
                    line-height: 22px;
                    position: absolute;
                    right: 15px;

                }
            }

            .listzzc_center {
                width: 100%;
                height: 40px;
            }
        }
    }
}

::-webkit-scrollbar {
    list-style: none;
}

.btn {
    margin: 10%;
    background: #031231;
    width: 81px;
    height: 50px;
    opacity: 1;
    border: 1px solid #5B9FC3;
    text-align: center;
    line-height: 50px;
    color: white;
}

.addzzc {


    width: 452px;
    height: 261px;

    position: absolute;
    box-shadow: inset 0px 0px 34px 0px #0D3EB8;
    top: 176px;
    left: 500px;
    right: 673px;
    bottom: 415px;
    opacity: 1;
    color: white;

    background: #021130;




    // background-color: transparent;

    .MaskLayeR_top {
        height: 30px;
        line-height: 30px;
        margin-left: 5px;
        display: flex;
        position: relative;

        div {
            width: 20%;
            height: 100%;
            text-align: center;
            color: white;
        }

        img {
            width: 80%;
            height: 100%;
            position: absolute;
            right: 0;
        }

        .off {
            width: 18px;
            height: 18px;
            text-align: right;
            font-size: 36px;
            font-weight: bold;
            color: #0E66B3;
            z-index: 99;
            cursor: pointer;
            line-height: 22px;
            position: absolute;
            right: 15px;
        }

    }

    .MaskLayeR_button {
        width: 340px;

        div {
            margin: 20px 0px 0px 51px;
            width: 100%;

            input {
                width: 70%;

                height: 27px;
                background: #031231;
                border: 1px solid #5B9FC3;
                outline: 0;
                color: white;

            }
        }

        button {
            width: 120px;
            height: 36px;
            line-height: 36px;
            margin: 97px 159px 43px 157px;
            text-align: center;

        }
    }
}

.Maintenance {
    display: flex;
    position: relative;
    justify-content: space-between !important;
    height: 100%;

    .Maintenance-left {

        height: 100%;

        cursor: pointer;

        overflow-y: auto;


        .maintenance {
            border: 1px solid #5B9FC3;
            text-align: center;
            line-height: 30px;
            color: white;

            margin: 10px 10px 10px 10px;
            width: 81px;
            height: 50px;
            background: #031231;
            opacity: 1;

            flex: none;
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
                width: 100%;
                height: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .img {
                width: 20px;
                height: 20px;
            }
        }

        .addModel {
            margin: 15px 26px 10px 10px;

            background: #031231;
            width: 81px;
            height: 50px;
            opacity: 1;
            border: 1px solid #5B9FC3;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;

            div {
                height: 30px;
                line-height: 30px;
            }

            .img {
                width: 19px;
                height: 19px;
            }
        }
    }

    .Maintenance-right {
        overflow-x: hidden;
        overflow-y: auto;
        color: #000;
        font-size: 56px;
        font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma;
        background: #021130;
    }

    /*滚动条样式*/
    .Maintenance-right::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 2px;
    }

    .Maintenance-right::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: rgba(96, 150, 225, 1);
        background: rgba(96, 150, 225, 1);
        height: 2px;

    }

    .Maintenance-right::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: rgba(96, 150, 225, 1);
        border-radius: 0;

    }

    .Maintenance-right {
        width: 99%;
        margin-top: 10px;
    }


    .zezaoc {
        height: 30px;
        position: fixed;
        font-size: 10px;
        top: 80px;
        left: 1480px;
        display: flex;
        cursor: pointer;

        div {
            width: 84.38px;
            height: 34.38px;
            background: #031231;
            opacity: 1;
            border: 1px solid #5B9FC3;
            text-align: center;
            line-height: 34.38px;
            color: white;
            margin: 0px 5px;


            .el-button--primary {
                height: 26px !important;
            }
        }

        .divitem {
            position: relative;
            border: 0px solid #5B9FC3;
            height: 40px;
            width: 95px;
            line-height: 40px;

            img {
                width: 100%;
                height: 100%;
            }

            .outbtn {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }

}

.on {
    border: 1px solid #5ca0c3;
    box-shadow: 0 0 13px #007eff inset;
}
</style>